<template>
  <div class="cart-container">
    <div class="header">
      <h1>购物车</h1>
    </div>
    <div class="cart-content">
      <!-- 空购物车状态 -->
      <div
        v-if="cartItems.length === 0"
        class="empty-cart"
      >
        <div class="empty-icon">🛒</div>
        <div class="empty-text">购物车是空的</div>
        <button
          class="shop-now-btn"
          @click="goToHome"
        >
          去逛逛
        </button>
      </div>

      <!-- 购物车商品列表 -->
      <div v-else>
        <!-- 全选和编辑 -->
        <div class="cart-header">
          <div class="select-all-container">
            <input
              id="selectAll"
              v-model="selectAll"
              type="checkbox"
              class="select-all-checkbox"
              @change="toggleSelectAll"
            />
            <label
              for="selectAll"
              class="select-all-label"
              >全选</label
            >
          </div>
          <div class="edit-cart">
            <span
              class="edit-btn"
              @click="toggleEditMode"
            >
              {{ isEditMode ? '完成' : '编辑' }}
            </span>
          </div>
        </div>

        <!-- 商品列表 -->
        <div class="cart-items">
          <div
            v-for="item in cartItems"
            :key="item.id"
            class="cart-item"
          >
            <!-- 选择框 -->
            <div class="item-select">
              <input
                :id="`select-item-${item.id}`"
                v-model="item.isSelected"
                type="checkbox"
                class="item-checkbox"
              />
              <label
                :for="`select-item-${item.id}`"
                class="item-checkbox-label"
              ></label>
            </div>

            <!-- 商品图片 -->
            <img
              :src="item.image"
              :alt="item.name"
              class="item-image"
            />

            <!-- 商品信息 -->
            <div class="item-info">
              <div class="item-name">
                {{ item.name }}
              </div>
              <div class="item-description">
                {{ item.description }}
              </div>
              <div class="item-price">¥{{ item.price.toFixed(2) }}</div>
            </div>

            <!-- 数量控制 -->
            <div class="item-quantity">
              <button
                class="quantity-btn minus"
                :disabled="item.quantity <= 1"
                @click="decreaseQuantity(item.id)"
              >
                -
              </button>
              <span class="quantity-value">{{ item.quantity }}</span>
              <button
                class="quantity-btn plus"
                @click="increaseQuantity(item.id)"
              >
                +
              </button>
            </div>

            <!-- 操作按钮 -->
            <div class="item-actions">
              <button
                class="remove-btn"
                @click="removeItem(item.id)"
              >
                {{ isEditMode ? '删除' : '×' }}
              </button>
            </div>
          </div>
        </div>

        <!-- 购物车汇总 -->
        <div class="cart-summary">
          <div class="summary-left">
            <span class="selected-count">已选 {{ selectedItemCount }} 件商品</span>
          </div>
          <div class="summary-right">
            <div class="total-price">
              合计: <span class="price-value">¥{{ selectedTotalPrice.toFixed(2) }}</span>
            </div>
            <button
              class="checkout-btn"
              :disabled="selectedItemCount === 0"
              @click="checkout"
            >
              结算
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 响应式数据
const isEditMode = ref(false)
const selectAll = ref(false)

// 模拟购物车数据
const cartItems = ref([
  {
    id: 1,
    name: 'Apple iPhone 13',
    price: 5999,
    image: 'https://picsum.photos/id/1/80/80',
    quantity: 1,
    isSelected: true,
    description: 'A15 仿生芯片，6.1英寸超视网膜XDR显示屏',
  },
  {
    id: 2,
    name: '华为 MateBook X Pro',
    price: 8999,
    image: 'https://picsum.photos/id/4/80/80',
    quantity: 1,
    isSelected: true,
    description: '11代酷睿i7，13.9英寸全面屏笔记本电脑',
  },
  {
    id: 3,
    name: '戴森空气净化器',
    price: 4990,
    image: 'https://picsum.photos/id/9/80/80',
    quantity: 1,
    isSelected: false,
    description: '智能净化，高效除甲醛，静音设计',
  },
  {
    id: 4,
    name: '兰蔻护肤套装',
    price: 899,
    image: 'https://picsum.photos/id/15/80/80',
    quantity: 2,
    isSelected: true,
    description: '补水保湿，提亮肤色，修护肌肤',
  },
])

// 计算选中的商品数量
const selectedItemCount = computed(() => {
  return cartItems.value.reduce((count, item) => count + (item.isSelected ? item.quantity : 0), 0)
})

// 计算选中商品的总价
const selectedTotalPrice = computed(() => {
  return cartItems.value.reduce(
    (total, item) => total + (item.isSelected ? item.price * item.quantity : 0),
    0
  )
})

// 切换全选状态
const toggleSelectAll = () => {
  const newState = !selectAll.value
  cartItems.value.forEach(item => {
    item.isSelected = newState
  })
  selectAll.value = newState
}

// 更新全选状态
const updateSelectAll = () => {
  const allSelected = cartItems.value.every(item => item.isSelected)
  selectAll.value = allSelected
}

// 初始化全选状态
updateSelectAll()

// 监听商品选择状态变化，更新全选状态
watch(
  () => cartItems.value.map(item => item.isSelected),
  () => {
    updateSelectAll()
  },
  { deep: true }
)

// 监听全选状态变化，更新所有商品选择状态
watch(selectAll, newValue => {
  cartItems.value.forEach(item => {
    item.isSelected = newValue
  })
})

// 增加商品数量
const increaseQuantity = id => {
  const item = cartItems.value.find(item => item.id === id)
  if (item) {
    item.quantity += 1
  }
}

// 减少商品数量
const decreaseQuantity = id => {
  const item = cartItems.value.find(item => item.id === id)
  if (item && item.quantity > 1) {
    item.quantity -= 1
  }
}

// 移除商品
const removeItem = id => {
  const index = cartItems.value.findIndex(item => item.id === id)
  if (index > -1) {
    cartItems.value.splice(index, 1)
    // 移除后检查是否需要更新全选状态
    if (cartItems.value.length > 0) {
      updateSelectAll()
    }
  }
}

// 切换编辑模式
const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value
}

// 前往首页
const goToHome = () => {
  router.push('/home')
}

// 结算功能
const checkout = () => {
  if (selectedItemCount.value === 0) {
    return
  }
  // 模拟结算过程
  const selectedItems = cartItems.value.filter(item => item.isSelected)
  // 这里可以添加结算逻辑，例如跳转到订单确认页面
  console.log('结算商品:', selectedItems)
  console.log('总价:', selectedTotalPrice.value)
  alert('结算功能开发中...')
}
</script>

<style scoped lang="less">
@import (reference) '../../styles/global.less';

.cart-container {
  min-height: 100vh;
  background: @background-color;
  padding-top: 20px;
  padding-bottom: 100px; // 为底部结算栏留出空间
}

.header {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 20px;
  h1 {
    font-size: 24px;
    color: @text-color;
    margin: 0;
  }
}

.cart-content {
  max-width: 1200px;
  margin: 0 auto;
  background: @white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-cart {
  text-align: center;
  padding: 60px 20px;
  color: @text-color-tertiary;

  .empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.5;
  }

  .empty-text {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .shop-now-btn {
    background: @primary-color;
    color: @white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;

    &:hover {
      background: #0e6ecc;
    }
  }
}

.cart-header {
  background: @white;
  padding: 20px;
  border-bottom: 1px solid @border-color;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select-all-container {
  display: flex;
  align-items: center;

  .select-all-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
  }

  .select-all-label {
    font-size: 14px;
    color: @text-color;
    cursor: pointer;
  }
}

.edit-cart {
  .edit-btn {
    background: none;
    border: none;
    color: @primary-color;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
  }
}

.cart-items {
  padding: 0 20px;

  .cart-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid @border-color;

    .item-select {
      margin-right: 15px;

      .item-checkbox {
        width: 20px;
        height: 20px;
        cursor: pointer;
      }

      .item-checkbox-label {
        display: block;
        width: 20px;
        height: 20px;
        position: relative;
        left: -20px;
        cursor: pointer;
      }
    }

    .item-image {
      width: 80px;
      height: 80px;
      border-radius: 5px;
      margin-right: 15px;
      object-fit: cover;
    }

    .item-info {
      flex: 1;

      .item-name {
        font-size: 16px;
        color: @text-color;
        margin-bottom: 5px;
        line-height: 1.4;
      }

      .item-description {
        font-size: @font-size-sm;
        color: @text-color-tertiary;
        margin-bottom: 8px;
        line-height: 1.3;
      }

      .item-price {
        font-size: 18px;
        color: @danger-color;
        font-weight: bold;
      }
    }

    .item-quantity {
      display: flex;
      align-items: center;
      margin-right: 20px;

      .quantity-btn {
        width: 30px;
        height: 30px;
        border: 1px solid #ddd;
        background: @white;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: @text-color-secondary;

        &:disabled {
          color: #ccc;
          cursor: not-allowed;
        }

        &.minus {
          border-radius: 4px 0 0 4px;
        }

        &.plus {
          border-radius: 0 4px 4px 0;
        }
      }

      .quantity-value {
        width: 40px;
        text-align: center;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 5px 0;
      }
    }

    .item-actions {
      flex-shrink: 0;

      .remove-btn {
        background: none;
        border: none;
        color: @text-color-tertiary;
        font-size: 20px;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          color: @danger-color;
        }
      }
    }
  }
}

.cart-summary {
  background: @white;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  bottom: 0;
  margin-top: 20px;

  .summary-left {
    display: flex;
    align-items: center;

    .selected-count {
      color: @text-color-secondary;
      font-size: @font-size-sm;
    }
  }

  .summary-right {
    display: flex;
    align-items: center;

    .total-price {
      font-size: 18px;
      font-weight: bold;
      color: @text-color;
      margin-right: 30px;

      .price-value {
        color: @danger-color;
        font-size: 22px;
      }
    }

    .checkout-btn {
      background: @danger-color;
      color: @white;
      border: none;
      padding: 12px 30px;
      border-radius: 20px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;

      &:hover:not(:disabled) {
        background: #ff5252;
      }

      &:disabled {
        background: #ccc;
        cursor: not-allowed;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: @screen-md) {
  .cart-content {
    padding: 0;
  }

  .cart-item {
    flex-wrap: wrap;
    padding: 10px !important;

    .item-image {
      width: 60px;
      height: 60px;
    }

    .item-name {
      font-size: @font-size-sm;
    }

    .item-description {
      font-size: 12px;
    }

    .item-price {
      font-size: 16px;
    }

    .item-quantity {
      margin-right: 10px;
    }
  }

  .cart-summary {
    flex-direction: column;
    align-items: flex-start;

    .summary-right {
      margin-top: 10px;
      width: 100%;
      justify-content: space-between;

      .total-price {
        margin-right: 0;
      }
    }
  }
}
</style>
